// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import VueRouter from 'vue-router'
import Vuex from 'vuex'

import App from './App'
import Todos from './components/Todos'
import Todo from './components/Todo'

Vue.use(VueAxios,axios)
Vue.use(VueRouter)
Vue.use(Vuex)
Vue.config.productionTip = false

const routes = [
  {path:'/',component:Todos},
  {path:'/todo/:id',component:Todo,name:'todo'},
]

const router = new VueRouter({
  routes
})

const store = new Vuex.Store({
  //申明变量,全局性变量
    state:{
      todos:[],
      newTodo:{id:null,title:'',completed:false}
    },
  //方法的集合，负责修改state的数据
    mutations:{
      get_todos_list(state,todos){
        state.todos=todos
      },
      complete_todo(state,todo){
        todo.completed = !todo.completed
      },
      delete_todo(state,index){
        state.todos.splice(index,1)
      },
      add_todo(state,todo){
        state.todos.push(todo)
      }
    },
  //负责获取端获取数据
    actions:{
        getTodos(store){
          Vue.axios.get('http://mg.com/api').then((response) => {
            store.commit('get_todos_list',response.data)
          })
        },
        completeTodo(store,todo){
            store.commit('complete_todo',todo)
        },
        removeTodo(store,payload){
          store.commit('delete_todo',payload.index)
        },
        saveTodo(store,todo){
          store.commit('add_todo',todo)
          store.state.newTodo = {id:null,title:'',completed:false}
        }
    }
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  template: '<App/>',
  components: { App },
  router
})
